<template>
	<view class="page">
		<view class="bg-w pd30 mb20">
			<view class="ft16 ftw600 text-main mb30">分销商品</view>
			<view class="search-box">
				<input class="search-input" v-model="searchKey" placeholder="搜索商品" />
				<view class="search-btn" @click="searchGoods">搜索</view>
			</view>
		</view>
		
		<view class="filter-tabs bg-w pd30 mb20">
			<scroll-view class="tab-scroll" scroll-x="true">
				<view class="tab-list">
					<view 
						v-for="(item, index) in categoryList" 
						:key="index"
						:class="['tab-item', {'active': currentCategory === item.id}]"
						@click="selectCategory(item.id)"
					>
						{{item.name}}
					</view>
				</view>
			</scroll-view>
		</view>
		
		<view class="goods-list">
			<view v-for="(item, index) in goodsList" :key="index" class="goods-item bg-w mb20">
				<view class="goods-content" @click="viewGoods(item.id)">
					<image :src="item.image" mode="aspectFill" class="goods-image"></image>
					<view class="goods-info">
						<view class="goods-title">{{item.title}}</view>
						<view class="goods-category">{{item.category_name}}</view>
						<view class="goods-price">¥{{item.price}}</view>
						<view class="commission-info">
							<text class="commission-label">佣金：</text>
							<text class="commission-value">{{item.commission_rate}}%</text>
							<text class="commission-amount">(¥{{(item.price * item.commission_rate / 100).toFixed(2)}})</text>
						</view>
						<view class="goods-stats">
							<text class="stat">已售{{item.sales}}件</text>
							<text class="stat">{{item.distributors}}人分销</text>
						</view>
					</view>
				</view>
				
				<view class="goods-actions">
					<button class="action-btn share-btn" @click="shareGoods(item)">
						<text class="iconfont">分享</text>
					</button>
					<button class="action-btn distribution-btn" @click="startDistribution(item)">
						立即分销
					</button>
				</view>
			</view>
		</view>
		
		<view v-if="goodsList.length === 0" class="empty-page">
			<app-icon :name="'https://picsum.photos/200/200'" type="image" custom-class="empty-image" />
			<view class="empty-text">暂无分销商品</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';

export default {
	data() {
		return {
			searchKey: '',
			currentCategory: 0,
			categoryList: [
				{ id: 0, name: '全部' },
				{ id: 1, name: '美食餐饮' },
				{ id: 2, name: '酒店住宿' },
				{ id: 3, name: '休闲娱乐' },
				{ id: 4, name: '生活服务' },
				{ id: 5, name: '教育培训' },
				{ id: 6, name: '美容美发' },
				{ id: 7, name: '健身运动' }
			],
			goodsList: [
				{
					id: 1,
					title: '豪华双人汉堡套餐',
					category_name: '美食餐饮',
					price: 39.9,
					commission_rate: 25,
					image: 'https://picsum.photos/seed/dist1/200/200.jpg',
					sales: 156,
					distributors: 45
				},
				{
					id: 2,
					title: '专业SPA护理套餐',
					category_name: '美容美发',
					price: 188,
					commission_rate: 20,
					image: 'https://picsum.photos/seed/dist2/200/200.jpg',
					sales: 89,
					distributors: 28
				},
				{
					id: 3,
					title: '健身房月卡',
					category_name: '健身运动',
					price: 299,
					commission_rate: 15,
					image: 'https://picsum.photos/seed/dist3/200/200.jpg',
					sales: 234,
					distributors: 67
				},
				{
					id: 4,
					title: '亲子乐园套票',
					category_name: '休闲娱乐',
					price: 88,
					commission_rate: 30,
					image: 'https://picsum.photos/seed/dist4/200/200.jpg',
					sales: 178,
					distributors: 52
				}
			]
		};
	},
	computed: {
		...mapState(['memberInfo']),
		isLogin() {
			return this.memberInfo == null ? false : true;
		}
	},
	onLoad() {
		this.loadGoodsList();
	},
	onShareAppMessage() {
		return {
			title: '推荐好商品，赚取佣金',
			path: '/pages/distribution/products'
		};
	},
	methods: {
		loadGoodsList() {
			// 实际项目中这里会调用API
		},
		
		searchGoods() {
			// 搜索商品
			uni.showToast({ title: '搜索中...', icon: 'loading' });
		},
		
		selectCategory(categoryId) {
			this.currentCategory = categoryId;
			this.loadGoodsList();
		},
		
		viewGoods(id) {
			uni.navigateTo({
				url: `/pages/goods/detail?id=${id}`
			});
		},
		
		shareGoods(item) {
			uni.showActionSheet({
				itemList: ['分享给好友', '生成海报'],
				success: (res) => {
					if (res.tapIndex === 0) {
						uni.share({
							provider: 'weixin',
							scene: 'WXSceneSession',
							type: 0,
							href: `https://demo.woyaou.com/goods/detail?id=${item.id}`,
							title: item.title,
							summary: `限时优惠，佣金${item.commission_rate}%`,
							imageUrl: item.image,
							success: () => {
								uni.showToast({ title: '分享成功', icon: 'success' });
							}
						});
					} else if (res.tapIndex === 1) {
						uni.showToast({ title: '正在生成海报...', icon: 'loading' });
					}
				}
			});
		},
		
		startDistribution(item) {
			if (!this.isLogin) {
				uni.showToast({ title: '请先登录', icon: 'none' });
				return;
			}
			
			uni.navigateTo({
				url: `/pages/distribution/promotion?goodsId=${item.id}`
			});
		}
	}
};
</script>

<style>
.search-box {
	display: flex;
	align-items: center;
	background: #f5f5f5;
	border-radius: 25rpx;
	padding: 10rpx 20rpx;
}

.search-input {
	flex: 1;
	font-size: 28rpx;
	height: 60rpx;
}

.search-btn {
	padding: 10rpx 20rpx;
	background: #007aff;
	color: white;
	border-radius: 20rpx;
	font-size: 24rpx;
}

.filter-tabs {
	border-bottom: 1rpx solid #f5f5f5;
}

.tab-scroll {
	white-space: nowrap;
}

.tab-list {
	display: inline-flex;
}

.tab-item {
	padding: 20rpx 30rpx;
	font-size: 28rpx;
	color: #666;
	white-space: nowrap;
}

.tab-item.active {
	color: #007aff;
	font-weight: 600;
	position: relative;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 30rpx;
	right: 30rpx;
	height: 4rpx;
	background: #007aff;
	border-radius: 2rpx;
}

.goods-item {
	padding: 30rpx;
	border-radius: 12rpx;
}

.goods-content {
	display: flex;
	margin-bottom: 20rpx;
}

.goods-image {
	width: 160rpx;
	height: 160rpx;
	border-radius: 8rpx;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.goods-info {
	flex: 1;
}

.goods-title {
	font-size: 28rpx;
	color: #333;
	font-weight: 600;
	margin-bottom: 10rpx;
	line-height: 1.3;
}

.goods-category {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 10rpx;
}

.goods-price {
	font-size: 32rpx;
	color: #ff4757;
	font-weight: 600;
	margin-bottom: 15rpx;
}

.commission-info {
	font-size: 24rpx;
	margin-bottom: 15rpx;
}

.commission-label {
	color: #666;
}

.commission-value {
	color: #ff6348;
	font-weight: 600;
	margin-left: 10rpx;
}

.commission-amount {
	color: #999;
	margin-left: 5rpx;
}

.goods-stats {
	font-size: 24rpx;
	color: #999;
}

.stat {
	margin-right: 20rpx;
}

.goods-actions {
	display: flex;
	gap: 20rpx;
}

.action-btn {
	flex: 1;
	height: 70rpx;
	border-radius: 35rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	border: none;
}

.share-btn {
	background: #f5f5f5;
	color: #333;
}

.distribution-btn {
	background: linear-gradient(135deg, #ff6348 0%, #ff8c42 100%);
	color: white;
	font-weight: 600;
}

.empty-page {
	padding: 100rpx 40rpx;
	text-align: center;
}

.empty-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 30rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}
</style>